// 监控区域数据
(function () {
  // 1. 准备数据
  let arr = [
    {
      title: "故障设备监控",
      subTitle: [
        "故障时间",
        "设备地址",
        "异常代码"
      ],
      contentArr: [
        {
          time: "20150102",
          address: "北京市昌平西路金燕龙写字楼",
          code: 100001
        },
        {
          time: "20151215",
          address: "北京市海淀区上地大厦",
          code: 100022
        },
        {
          time: "20160322",
          address: "天津市滨海新区互联网大厦",
          code: 100103
        },
        {
          time: "20161012",
          address: "广州市南沙区可爱路",
          code: 100704
        },
        {
          time: "20170611",
          address: "深圳市盐田区五道口大街",
          code: 103205
        },
        {
          time: "20181112",
          address: "上海市宝山区南大街22号",
          code: 100008
        },
        {
          time: "20180520",
          address: "天津市市区梅花大厦",
          code: 100011
        },
        {
          time: "20190914",
          address: "北京市朝阳区人民写字楼",
          code: 100025
        },
        {
          time: "20201102",
          address: "北京市东城区公园",
          code: 100301
        },
        {
          time: "20201103",
          address: "石家庄市桥西区大龙写字楼",
          code: 105001
        }
      ]
    },
    {
      title: "异常设备监控",
      subTitle: [
        "异常时间",
        "地址",
        "代码"
      ],
      contentArr: [
        {
          time: "20201103",
          address: "石家庄市桥西区大龙写字楼",
          code: 105001
        },
        {
          time: "20160322",
          address: "天津市滨海新区互联网大厦",
          code: 100103
        },
        {
          time: "20170611",
          address: "深圳市盐田区五道口大街",
          code: 103205
        },
        {
          time: "20151215",
          address: "北京市海淀区上地大厦",
          code: 100022
        },
        {
          time: "20181112",
          address: "上海市宝山区南大街22号",
          code: 100008
        },
        {
          time: "20180520",
          address: "天津市市区梅花大厦",
          code: 100011
        },
        {
          time: "20190914",
          address: "北京市朝阳区人民写字楼",
          code: 100025
        },
        {
          time: "20150102",
          address: "北京市昌平西路金燕龙写字楼",
          code: 100001
        },
        {
          time: "20201102",
          address: "北京市东城区公园",
          code: 100301
        },
        {
          time: "20161012",
          address: "广州市南沙区可爱路",
          code: 100704
        }
      ]
    }
  ];
  // 2.遍历数据
  // 3.创建标签
  // 4.添加到对应的容器
  arr.forEach((obj, index) => {
    let theA = $(`<a href="javascript:;" data-index="${index}" 
                  class="${index === 0 ? 'active' : ''}">
                  ${obj.title}</a>`
    )
    $('.monitor .tabs').append(theA)

    // 判断index 为 0 的情况下,才渲染 head区域 (默认展示的是数组中的第一条数据)
    if (index === 0) {
      // console.log(obj);
      load()  // 封装的函数 (渲染页面)
    }
  })

  function load(index = 0) {
    let obj = arr[index]
    // head区域的数据渲染
    obj.subTitle.forEach(str => {
      let theSpan = $(`<span class="col">${str}</span>`)
      $('.monitor .head').append(theSpan)
    })

    // 滚动区域的数据渲染
    obj.contentArr.forEach((contentObj, index) => {
      let theDiv = $(`<div class="row">
                          <span class="col">${contentObj.time}</span>
                          <span class="col">${contentObj.address}</span>
                          <span class="col">${contentObj.code}</span>
                          <span class="icon-dot"></span>
                      </div>`)
      $('.monitor .marquee').append(theDiv)
    })
    // 等循环结束之后在克隆一份数据
    let cloneDiv = $('.monitor .marquee div').clone()
    // 将克隆好的数据追加到容器中
    $('.monitor .marquee').append(cloneDiv)
  }

  // 5.注册点击事件
  $('.monitor .tabs a').on('click', function () {
    // 5.1 添加高亮 
    $(this).addClass('active').siblings().removeClass('active')
    // 5.2 获取下标
    let index = $(this).index() // 0 
    // 5.3 先清空数据
    $('.monitor .head').empty()
    $('.monitor .marquee').empty()
    // 5.4 渲染页面
    load(index)


    // // 5.3 通过下标,找到数组中对应的数据
    // let obj = arr[index]
    // // 5.4 渲染页面
    // // 5.5 先清空数据
    // $('.monitor .head').empty()
    // $('.monitor .marquee').empty()
    // // head区域的数据渲染
    // obj.subTitle.forEach(str => {
    //   let theSpan = $(`<span class="col">${str}</span>`)
    //   $('.monitor .head').append(theSpan)
    // })

    // // 滚动区域的数据渲染
    // obj.contentArr.forEach((contentObj, index) => {
    //   let theDiv = $(`<div class="row">
    //                           <span class="col">${contentObj.time}</span>
    //                           <span class="col">${contentObj.address}</span>
    //                           <span class="col">${contentObj.code}</span>
    //                           <span class="icon-dot"></span>
    //                       </div>`)
    //   $('.monitor .marquee').append(theDiv)
    // })
    // // 等循环结束之后在克隆一份数据
    // let cloneDiv = $('.monitor .marquee div').clone()
    // // 将克隆好的数据追加到容器中
    // $('.monitor .marquee').append(cloneDiv)
  })
})();